<style>
    .wrap_content{background: #f2f2f2;}
    .layui-card-header{color:#FFF;border-bottom:none;}
    .layui-card-header .layui-badge{background:none;color:#FFF;font-size:16px;}
    .layui-card1{border-radius:6px;color:#FFF;}
    .layuiadmin-card-list p.layuiadmin-big-font{color:#FFF;text-align:center;margin-bottom:15px;}
    .layuiadmin-card-list p:nth-child(2){font-size:16px;color:#FFF;}
    .first{background:#67c645;margin:0 15px;}
    .second{background:#e53c6c;margin:0 15px;}
    .third{background:#fd5f2e;margin:0 15px;}
    .forth{background:#329fed;margin:0 15px;}
    .layui-table-header .layui-table tr{background:#f0f4f5;color:#6c819e;}
    .layui-table-total .layui-table{color:#f87470;}
    table th a{color:#6c819e;}
</style>
<style>
    .layui-card-body div:nth-child(1){
        height: 300px;
    }
</style>
<div style="background: #fff;border:1px solid #e8e8e8;" class="layui-col-md12">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm12" style="padding:30px 0;border-bottom:1px solid #e8e8e8;">
                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card layui-card1 first">
                        <div class="layui-card-header">
                            话题数量（个）
                            <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-dialogue" style="font-size:18px;"></i></span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font">{$total['topic_count']}</p>
                            <p>
                                &nbsp;
                            </p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card layui-card1 second">
                        <div class="layui-card-header">
                            文章数量（篇）
                            <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-read" style="font-size:18px;"></i></span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font">{$total['article_count']}</p>
                            <p>
                                &nbsp;
                            </p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card layui-card1 third">
                        <div class="layui-card-header">
                            问题数量（个）
                            <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-survey" style="font-size:18px;"></i></span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font">{$total['question_count']}</p>
                            <p>
                                &nbsp;
                            </p>
                        </div>
                    </div>
                </div>

                <div class="layui-col-sm6 layui-col-md3">
                    <div class="layui-card layui-card1 forth">
                        <div class="layui-card-header">
                            宝宝数量（人）
                            <span class="layui-badge layuiadmin-badge"><i class="layui-icon layui-icon-user" style="font-size:18px;"></i></span>
                        </div>
                        <div class="layui-card-body layuiadmin-card-list">
                            <p class="layuiadmin-big-font">{$total['baby_count']}</p>
                            <p>
                                家长数量
                                <span class="layuiadmin-span-color">{$total['parent_count']}人</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header" style="color: #666;">宝宝性别</div>
                    <div class="layui-card-body">
                        <div id="pay"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header"  style="color: #666;">用户增长趋势</div>
                    <div class="layui-card-body">
                        <div id="increase"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common/echarts" /}
<script>
    layui.use(['form'], function() {
        var $ = layui.$
            ,form = layui.form;

        frequency('');

        // 月度预定-入住频次分析
        function frequency(hotel_id) {
            let url = "{:url('index/index')}";
            $.post(url,{},function (ret) {
                let pay = ret.pie_data;
                let dateMonth = ret.dateMonth;
                let inc = ret.inc;

                // 费用缴纳情况分析
                let myChartPay = echarts.init(document.getElementById('pay'),echartsTheme);
                let optionPay =  {
                    color: ['#329fed','#e53c6c'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data:['男宝宝','女宝宝']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    series: [
                        {
                            name:'人数占比',
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:pay
                        }
                    ]
                };
                myChartPay.setOption(optionPay);


                // 客户趋势分析
                let myChartInc = echarts.init(document.getElementById('increase'),echartsTheme);
                let optionInc = {
                    color: ['#67c645','#fd5f2e'],
                    title : {
                        text: '',
                        subtext: '',
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:[inc[0]['name'],inc[1]['name']]
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : dateMonth
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : inc,
                };
                myChartInc.setOption(optionInc);

            });
        }

        function autoK(value) {
            var str;
            if (value >=1000) {
                str = value/1000+'k';
            }else if(value <1000){
                str = value;
            }
            return str
        }
    });

</script>

